<template>
  <f7-page
    :name="name"
    @page:init="onPageInit"
    @page:afterin="onPageAfterIn"
    @page:beforeout="onPageBeforeOut"
    @page:beforeremove="onPageBeforeRemove"
  >
    <f7-toolbar bottom class="toolbar-one wechat-btn" v-if="checkType!='success'">
      <f7-link @click="check()">
        <span class="link-span" v-text="checkName">报名</span>
      </f7-link>
    </f7-toolbar>
    <div class="detail-div-body">
      <!-- <law-detail v-if="lawQuery.id" :query-data="lawQuery"></law-detail> -->
      <h2>{{ lawQuery.title }}</h2>

      <div
        class="list"
        v-if="lawQuery.steps && lawQuery.steps.length > 0"
        style="padding: 10px 0px 10px 0px;"
      >
        <ul>
          <li v-for="el in lawQuery.steps" :key="el.id">
            <div class="item-content">
              <div class="item-media">
                <i class="icon f7-icons">book</i>
              </div>
              <div class="item-inner">
                <div class="item-title" v-text="el.title"></div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div v-if="lawQuery.time">已学习课时：{{lawQuery.time}} 小时</div>

      <div class="detail-main">
        <div
          class="detail-content"
          style="padding: 10px 0px 10px 0px;"
          v-html="lawQuery.content||''"
        ></div>
      </div>
    </div>
  </f7-page>
</template>

<script>
import Log from "../../mod/log.js";
import strings from "../../assets/strings";

import LawDetail from "../components/detail.vue";
import Http from "../../js/mod.http";
import Utils from "../../js/mod.utils";
import AlertUtils from "../../mod/utils.alert";
import ConstantUtils from "../../js/vue.constant";
import Dialog from "../../js/vue.dialog";

const name = strings.page.law.detail;
const log = new Log(name);

export default {
  components: {
    LawDetail,
  },
  data() {
    return {
      name: name,

      id: "",
      from: "law-detail",
      lawQuery: {},

      checkType: "cancel", // cancel,checking,success
      checkName: "报名", // 报名 取消报名
    };
  },
  methods: {
    onCreated() {
      let _this = this;
    },
    onMounted() {
      let _this = this;
    },
    onPageInit() {
      let _this = this;
      let query = Utils.getParamData(_this);
      _this.id = query.id || 0;

      _this.getLawQueryInfo();
    },
    onPageAfterIn() {
      let _this = this;
      Utils.setTitle(_this, "课程信息");
      Utils.setBack(_this, function (e) {
        _this.onBack();
      });
      // cordova.addAndroidHook(_this);
    },
    onPageBeforeOut() {
      let _this = this;
      // cordova.removeAndroidHook(_this);
    },
    onPageBeforeRemove() {
      let _this = this;
    },
    getLawQueryInfo() {
      let _this = this;
      let data = {
        id: _this.id,
        openid: _this.$f7.data.openid,
      };
      let _successQuery = (res) => {
        let resData = res.data || {};
        _this.lawQuery = resData;
        _this.checkType = resData.type;
        if (resData.type == "checking") {
          // 申请中
          _this.checkName = "取消报名";
        } else {
          _this.checkName = "报名";
        }
      };
      let params = {
        url: Http.kInterfacePath.edu.query,
        data: data,
        warn_error: "获取课程信息失败！",
        success: _successQuery,
      };
      Http.ajax(_this, params);
    },
    check() {
      let _this = this;
      let type = "checking";
      if (_this.checkType == "checking") {
        type = "cancel";
      }
      let data = {
        id: _this.id,
        openid: _this.$f7.data.openid,
        type: type,
      };
      let _successCheck = (res) => {
        Dialog.toast(_this, { text: "操作成功" });
        _this.getLawQueryInfo();
      };
      let params = {
        url: Http.kInterfacePath.edu.check,
        data: data,
        success: _successCheck,
      };
      Http.ajax(_this, params);
    },

    onBack() {
      let _this = this;
      _this.$f7router.back();
    },
    onResume() {
      log.w("onResume");
    },
    onPause() {
      log.w("onPause");
    },
  },
  created() {
    this.onCreated();
  },
  mounted() {
    this.onMounted();
  },
};
</script>

<style scoped>
</style>